<template>
  <div class="invoice-detail-page">
    <el-card shadow="always">
      <div slot="header">
        <line-header title="查看发票"></line-header>
      </div>
      <div class="card-dody">
        <el-row :gutter="50">
          <el-col :span="12">
            <el-form ref="form" :model="invoiceInfo" label-width="100px">
              <el-form-item label="用户名:">
                <div>{{ invoiceInfo.account }}</div>
              </el-form-item>
              <el-form-item label="开票金额:">
                <div>{{ invoiceInfo.amount }}</div>
              </el-form-item>
              <el-form-item label="发票抬头:">
                <div>{{ invoiceInfo.title }}</div>
              </el-form-item>
              <el-form-item label="发票类型:">
                <div>{{ invoiceInfo.kind | filtersCategory }}</div>
              </el-form-item>
              <el-form-item label="纳税人识别号:" label-width="102px">
                <div>{{ invoiceInfo.sno }}</div>
              </el-form-item>
              <el-form-item label="地址:">
                <div>{{ invoiceInfo.iAddress }}</div>
              </el-form-item>
              <el-form-item label="电话:">
                <div>{{ invoiceInfo.iPhone }}</div>
              </el-form-item>
              <el-form-item label="开户行:">
                <div>{{ invoiceInfo.iBank }}</div>
              </el-form-item>
              <el-form-item label="银行账号:">
                <div>{{ invoiceInfo.iBankCode }}</div>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form ref="form" :model="invoiceInfo" label-width="100px">
              <el-form-item label="姓名:">
                <div>{{ invoiceInfo.rName }}</div>
              </el-form-item>
              <el-form-item label="快递公司:">
                <div>{{ invoiceInfo.tCompany }}</div>
              </el-form-item>
              <el-form-item label="快递单号:">
                <div>{{ invoiceInfo.tno }}</div>
              </el-form-item>
              <el-form-item label="电话:">
                <div>{{ invoiceInfo.rPhone }}</div>
              </el-form-item>
              <el-form-item label="发票扫描件:">
<!--                <el-image-->
<!--                  style="width: 260px; height: 140px"-->
<!--                  :src="invoiceInfo.img"-->
<!--                  fit="contain"-->
<!--                ></el-image>-->
                <img
                  style="width: 260px; height: 240px"
                  :src="invoiceInfo.img"
                  fit="contain"
                  @click="lookImg(invoiceInfo.img)"
                />
                <el-dialog
                  title="图片预览"
                  :visible.sync="dialogTableVisible"
                >
                  <div>
                    <img v-if="dialogImg.indexOf('yyzz')>=0"
                         :src="require('@/assets/verify/yyzz.png')"
                         style="width: 100%;"
                    />
                    <img v-else
                         :src="dialogImg"
                         style="width: 100%;"
                    />
                  </div>
                </el-dialog>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

        <div class="bottom-box">
          <el-button :type="invoiceInfo.status | filiterTagType">
            {{ invoiceInfo.status | filiterTagText }}
          </el-button>
          <el-button type="primary" plain @click="hkCancel">
            {{ "返回" }}
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import LineHeader from "@/components/line-header/index";
  import {invoiceStatusList, invoiceClass} from "@/utils/tools";
  import {trace} from "../../../utils/trace"
  import {mapGetters} from "vuex"

  export default {
    components: {LineHeader},
    props: {},
    data() {
      return {
        fileImg1: "",
        dialogImg:"",
        dialogTableVisible:false,
        invoiceInfo: {
          id: "1123123",
          account: "zhihuo",
          serial: "01",
          number: "12312313",
          title: "上海智火信息科技有限公司",
          amount: "1309",
          status: 3,
          kind: "1", //发票类型：
          sno: "12345678", //纳税人识别号：
          iAddress:"",
          rAddress: "上海市杨浦区隆昌路619号城市概念8号楼南区C07", //地址：
          iPhone: "021-51078149", //电话：
          iBank: "招商银行股份有限公司上海五角场支行", //开户行：
          iBankCode: "121917499310901", //银行账号：
          rName: "智火",
          tCompany: "顺丰速运",
          tno: "4363423874628429842934",
          rPhone: "021-373628364",
          img:"",
          establishedTime: "",
        },

      };
    },
    filters: {
      filtersCategory(val) {
        return invoiceClass.find(item => {
          return item.value == val;
        }).label;
      },
      filiterTagType(val) {
        return invoiceStatusList.find(item => {
          return item.key == val;
        }).type;
      },
      filiterTagText(val) {
        return invoiceStatusList.find(item => {
          return item.key == val;
        }).label;
      }
    },
    watch: {},
    computed: {...mapGetters(["userInfo", "invoiceList"])},
    methods: {
      lookImg(value){
        this.dialogImg=value;
        this.dialogTableVisible = true
      },
      lookAgreement: function (value) {
        this.$router.push({path: "/verify/agreement"});
      },
      // 取消
      hkCancel() {
        this.$router.back();
      },
      async getList() {
        let page = this.currentPage;
        let count = this.pageSize;
        let direction = 1;
        let kind = 8789324728947;
        let status = 8789324728947;
        let res = await this.$store.dispatch('finance/invoiceQuery', { page, count, direction, status })
        return res;
      },
    },
    async created() {
      var query = this.$route.query;
      let id = query.id;
      if (!this.invoiceInfo || this.invoiceList.length < 1) {
        await this.getList();
      }
      if (id && this.invoiceList) {
        let obj = this.invoiceList.data.find(item => {
          return item.id == id;
        })

        if (obj) {
          this.invoiceInfo = obj;
        }

      }
    },
    mounted() {
    }
  };
</script>
<style lang="scss" scoped>
  .el-form-item {
    margin-bottom: 0px;
  }

  .card-dody {
    margin: 0 auto;
    max-width: 70%;

    .bottom-box {
      margin: 40px;
      text-align: center;
    }
  }
</style>
